import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

//假设当前的角色
const nowRole = "jiangshi";

//Vue.directive()可以定义一个自定义指令
//自定义指令的值如果书写为一个函数,则默认是钩子函数中的bind函数
//自定义指令的值可以不写一个函数,而是写成一个对象,对象内部配置钩子函数
Vue.directive("role", {
  //bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  bind() {
    console.log("bind");
  },
  //inserted:被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  inserted(el, binding) {
    console.log("inserted");
    //删除DOM是要依赖父元素的,所以需要在inserted钩子中操作
    binding.value.includes(nowRole) || el.remove();
  },
  //update:所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
  update() {
    console.log("update");
  },
  // componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  componentUpdated() {
    console.log("componentUpdated");
  },
  //unbind：只调用一次，指令与元素解绑时调用
  unbind() {
    console.log("unbind");
  },
});

new Vue({
  render: (h) => h(App),
}).$mount("#app");
